<template>
  <nav>
    <a v-for="a in 6" :key="a" :href="'#t'+a">标题{{ a }}</a>
  </nav>
  <div class="card-box">
    <el-card v-for="h in 6" :key="h" :id="'t'+h">
      <template #header>
        <div>
          <span>标题{{ h }}</span>
        </div>
      </template>
      <p v-for="o in 10">事项{{ o }}</p>
    </el-card>
  </div>
</template>
<script setup lang="ts">

</script>
<style scoped lang="scss">
nav {
  position: fixed;
  top: 100px;
  right: 50px;
  height: 360px;
  width: 200px;
  background: #e5e5e5;

  a {
    display: block;
    line-height: 20px;
    padding: 20px;

    &:hover {
      background: #a3e635;
      cursor: pointer;
    }
  }
}

.card-box {
  height: 100%;
  scroll-behavior: smooth;
  overflow-y: auto;
  .el-card {
    margin: 10px;
  }
}

</style>
